<!-- 评教管理：课堂教学质量评价汇总：综合评教结果查询 -->
<template>
  <div>
    <div class="title">
      <span>{{ queryForm.semester }}（{{ queryForm.position }}）课堂教学质量试评结果汇总表</span>
    </div>
    <el-form label-suffix="：" label-position="left" style="display: flex;">
      <el-form-item label-width="55px" label="学期">
        <el-select v-model="queryForm.semester" size="mini" placeholder="请选择学期" style="margin: 0 20px 0 -15px;">
          <el-option v-for="(item, index) in semesterList" :key="index" :label="item.xqmc" :value="item.xqmc" />
        </el-select>
      </el-form-item>
      <el-form-item label-width="55px" label="职称">
        <el-select v-model="queryForm.position" size="mini" placeholder="请选择职称" style="margin: 0 20px 0 -15px;">
          <el-option v-for="(item, index) in positionList" :key="index" :label="item.label" :value="item.label" />
        </el-select>
      </el-form-item>
      <el-form-item v-if="roleId === '1490880658945843202' || roleId === '1490880469703041025' || roleId === '1490859077385211906'" label-width="85px" label="职称类别">
        <el-select v-model="queryForm.category" size="mini" clearable placeholder="请选择职称类别" style="margin: 0 20px 0 -15px;">
          <el-option v-for="(item, index) in categoryList" :key="index" :label="item.label" :value="item.label" />
        </el-select>
      </el-form-item>
      <el-form-item v-if="roleId === '1490859077385211906'" label-width="70px" label="教学系">
        <el-select v-model="queryForm.department" size="mini" clearable placeholder="请选择教学系" style="margin: 0 20px 0 -15px;" @change="handleChangeDepartment">
          <el-option v-for="(item, index) in departmentList" :key="index" :label="item.label" :value="item.label" />
        </el-select>
      </el-form-item>
      <el-form-item v-if="roleId === '1490880469703041025' || roleId === '1490859077385211906'" label-width="70px" label="教研室">
        <el-select v-model="queryForm.office" size="mini" clearable placeholder="请选择教研室" style="margin: 0 20px 0 -15px;">
          <el-option v-for="(item, index) in officeList" :key="index" :label="item.label" :value="item.label" />
        </el-select>
      </el-form-item>
      <el-form-item v-if="roleId === '1475294432243830786'" label-width="85px" label="成绩类型">
        <el-select v-model="queryForm.achievement" size="mini" clearable placeholder="请选择成绩类型" style="margin: 0 20px 0 -15px;">
          <el-option v-for="(item, index) in achievementList" :key="index" :label="item.label" :value="item.label" />
        </el-select>
      </el-form-item>
      <el-form-item v-if="roleId === '1490859077385211906'" label-width="85px" label="教员姓名">
        <el-input v-model="queryForm.teacherName" size="mini" clearable placeholder="请输入教员姓名" style="margin: 0 20px 0 -15px;" />
      </el-form-item>
      <div class="button-style" style="margin-top: 6px;" @click="handleSearch">
        <img src="@/assets/assessment/icon-search.png" alt="" />
        <span>查询</span>
      </div>
    </el-form>
    <el-table
      border
      :data="tableData"
      class="xpaas-table-class"
      row-class-name="xpaas-row-class"
      cell-class-name="xpaas-cell-class"
      header-row-class-name="xpaas-header-row-class"
      header-cell-class-name="xpaas-header-cell-class">
      <el-table-column type="index" label="序号" width="55" align="center" />
      <el-table-column prop="col1" label="教员名称" show-overflow-tooltip align="center" />
      <el-table-column prop="col2" label="教研室" show-overflow-tooltip align="center" />
      <el-table-column prop="col3" label="职称" show-overflow-tooltip align="center" />
      <el-table-column prop="col4" label="承担课程" show-overflow-tooltip align="center" />
      <el-table-column prop="col5" label="教学班" show-overflow-tooltip align="center" />
      <el-table-column prop="col6" label="总学时" show-overflow-tooltip align="center" />
      <el-table-column prop="col7" label="同行评价等级" show-overflow-tooltip align="center" />
      <el-table-column prop="col8" label="同行评分" show-overflow-tooltip align="center" />
      <el-table-column prop="col9" label="专家评价等级" show-overflow-tooltip align="center" />
      <el-table-column prop="col10" label="专家评分" show-overflow-tooltip align="center" />
      <el-table-column prop="col11" label="学员评分" show-overflow-tooltip align="center" />
      <el-table-column prop="col12" label="总评分" show-overflow-tooltip align="center" />
    </el-table>
    <div style="float: right; margin-top: 15px; padding-bottom: 15px;">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="padding: 0;">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getStore } from '@/util/store.js'
import { reqGetXqList } from '@/api/admin1/check'
import { getJxx, getJys, getJysByJxx } from '@/api/classHoursAddList/ClassTimeQuery'
export default {
  data() {
    return {
      roleId: '',
      pageNo: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
      queryForm: {
        semester: '',
        position: '',
        category: '',
        department: '',
        office: '',
        achievement: '',
        teacherName: ''
      },
      semesterList: [],
      positionList: [],
      categoryList: [],
      departmentList: [],
      officeList: [],
      achievementList: []
    }
  },
  mounted() {
    const userInfo = getStore({
      name: "userInfo",
      debug: true,
    }) || {}
    this.roleId = userInfo.content.role_id
    reqGetXqList().then(res => {
      if (res.data.data && res.data.data.length > 0) {
        this.semesterList = res.data.data
        this.queryForm.semester = res.data.data[0].xqmc
      }
    })
    this.positionList = [
      { value: '1', label: '本科' },
      { value: '2', label: '研究生' },
      { value: '3', label: '士官' }
    ]
    this.queryForm.position = this.positionList[0].label
    this.categoryList = [
      { value: '1', label: '初职' },
      { value: '2', label: '中职' },
      { value: '3', label: '副高职' },
      { value: '4', label: '正高职' }
    ]
    getJxx().then(res => {
      if (res.data.data && res.data.data.length > 0) {
        this.departmentList = res.data.data
      }
    })
    getJys().then(res => {
      if (res.data.data && res.data.data.length > 0) {
        this.officeList = res.data.data
      }
    })
    this.handleSearch()
  },
  methods: {
    handleSearch: function () {
      this.tableData = [
        { col1: '刘一', col2: '教研室1', col3: '本科', col4: '英语', col5: '英语一班', col6: '125', col7: 'A', col8: '85', col9: 'A', col10: '88', col11: '89', col12: '88' },
        { col1: '陈二', col2: '教研室1', col3: '本科', col4: '日语', col5: '日语一班', col6: '125', col7: 'A', col8: '85', col9: 'A', col10: '88', col11: '89', col12: '88' },
        { col1: '张三', col2: '教研室1', col3: '本科', col4: '法语', col5: '法语一班', col6: '125', col7: 'A', col8: '85', col9: 'A', col10: '88', col11: '89', col12: '88' },
        { col1: '李四', col2: '教研室1', col3: '本科', col4: '德语', col5: '德语一班', col6: '125', col7: 'A', col8: '85', col9: 'A', col10: '88', col11: '89', col12: '88' },
        { col1: '王五', col2: '教研室1', col3: '本科', col4: '西班牙语', col5: '西班牙语一班', col6: '125', col7: 'A', col8: '85', col9: 'A', col10: '88', col11: '89', col12: '88' },
        { col1: '赵六', col2: '教研室1', col3: '本科', col4: '韩语', col5: '韩语一班', col6: '125', col7: 'A', col8: '85', col9: 'A', col10: '88', col11: '89', col12: '88' }
      ]
      this.total = 6
    },
    handleChangeDepartment: function (val) {
      this.queryForm.office = ''
      if (val === '') {
        getJys().then(res => {
          if (res.data.data && res.data.data.length > 0) {
            this.officeList = res.data.data
          }
        })
      } else {
        getJysByJxx(val).then(res => {
          if (res.data.data && res.data.data.length > 0) {
            this.officeList = res.data.data
          }
        })
      }
    },
    handleCurrentChange: function (val) {
      this.pageNo = val
      this.handleSearch()
    },
    handleSizeChange: function (val) {
      this.pageSize = val
      this.handleSearch()
    }
  }
}
</script>

<style lang="less" scoped>
  .title {
    color: #004ca7;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 15px;
  }
  .button-style {
    float: left;
    background: #f1f8fe;
    border: 1px solid #51aef6;
    width: 80px;
    height: 28px;
    line-height: 28px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    box-sizing: border-box;
    > img {
      width: 16px;
      height: 16px;
      margin-right: 5px;
    }
    > span {
      font-size: 14px;
      color: #51aef6;
    }
  }
  @fontFamily:"Microsoft YaHei";
  .xpaas-table-class {
    border: 1px solid #004ca7;
    border-radius: 9px;
    ::v-deep div.el-table__header-wrapper {
      table.el-table__header {
        thead {
          tr.xpaas-header-row-class {
            padding: 0;
            height: 60px;
            background-color: #edf2f9;
            font-size: 16px;
            font-family: @fontFamily;
            font-weight: bold;
            line-height: 20px;
            color: #004ca7;
            th.xpaas-header-cell-class {
              font-weight: bold;
              border-right: 1px solid #c7d7eb;
              border-left: 0;
              border-bottom: 1px solid #c7d7eb;
              background-color: #edf2f9;
              div.cell {
                font-size: 16px;
                font-weight: bold;
                font-family: @fontFamily;
                color: #004ca7;
              }
            }
          }
        }
      }
    }
    ::v-deep div.el-table__body-wrapper {
      table.el-table__body {
        tbody {
          tr.xpaas-row-class {
            td.xpaas-header-cell-class {
              border-right: 1px solid #c7d7eb;
              border-left: 0;
              border-bottom: 1px solid #c7d7eb;
              background-color: #edf2f9;
              div.cell {
                font-size: 16px;
                font-weight: bold;
                font-family: @fontFamily;
                color: #004ca7;
              }
            }
            td.xpaas-cell-class {
              height: 60px;
              border-right: 1px solid #c7d7eb;
              border-left: 0;
              border-bottom: 1px solid #c7d7eb;
              div.cell {
                font-family: @fontFamily;
                color: #004ca7;
              }
            }
          }
        }
      }
    }
  }
  /deep/ .el-form-item__label {
    color: #004ca7;
    font-size: 14px;
  }
</style>
